<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<head>
    <style>
        * {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-size: 12px; }

body {
  overflow: hidden; }

header {
  background-color: #FE5400;
  width: 100%; }
  header .search-wrap {
    padding: 6px 6px 6px 37px;
    background-size: 27px 20px;
    background-position: 4.5px center; }
    header .search-wrap #search {
      border-radius: 5px;
      width: 100%;
      box-sizing: border-box;
      background-color: #B52600;
      text-align: center;
      color: #FFF;
      line-height: 26px;
      font-size: 1rem; }

#scrollView {
  width: 100%; }
  #scrollView #content {
    margin: 0 auto;
    max-width: 540px;
    width: 100%;
    overflow: hidden; }
    #scrollView #content #view {
      width: 100%;
      height: 3000px;
      background: red; }
      #scrollView #content #view #banner {
        position: relative; }
        #scrollView #content #view #banner ul {
          position: relative;
          width: 500%;
          height: 100%; }
          #scrollView #content #view #banner ul li {
            position: absolute;
            width: 20%;
            height: 100%; }
            #scrollView #content #view #banner ul li img {
              width: 100%;
              height: 100%; }
        #scrollView #content #view #banner .btns {
          position: absolute;
          bottom: 0.25rem;
          right: 1rem; }
          #scrollView #content #view #banner .btns span {
            height: 1rem;
            width: 1rem;
            font-size: 0;
            display: block;
            background: rgba(200, 200, 200, 0.9);
            border-radius: 50%;
            margin: 5px;
            float: left; }
      #scrollView #content #view #entrance {
        width: 100%;
        background: white;
        margin-top: 15px; }
        #scrollView #content #view #entrance ul {
          width: 100%;
          height: 50%; }
          #scrollView #content #view #entrance ul li {
            float: left;
            width: 25%;
            height: 100%; }
            #scrollView #content #view #entrance ul li span {
              height: 7rem;
              width: 7rem;
              border-radius: 50%;
              display: block;
              background: red;
              margin: auto; }

footer {
  width: 100%;
  z-index: 999;
  height: 40px;
  border-top: 1px solid #E7E7E7;
  background: white;
  display: flex;
  display: -webkit-flex;
  position: fixed;
  bottom: 0; }
  footer a {
    flex: 1;
    -webkit-flex: 1;
    display: block;
    border: 1px solid red; }

/*# sourceMappingURL=css.css.map */

    </style>
</head>
<header>
    <div id = 'logo'></div>
    <div class = 'search-wrap'>
        <div id = 'search'>
            寻找宝贝店铺
        </div>
    </div>
</header>
<div id = 'scrollView'>
    <div id = 'content'>
        <div id = 'view' style = 'transform: translate3d(0,0,0)'>
            <div id = 'banner'>
                <ul>
                    <li class = 'bannerLi'>
                        <img src = 'test.jpg' />
                    </li>
                    <li class = 'bannerLi'>
                        <img src = 'test.jpg' />
                    </li>
                    <li class = 'bannerLi'>
                        <img src = 'test.jpg' />
                    </li>
                    <li class = 'bannerLi'>
                        <img src = 'test.jpg' />
                    </li>
                    <li class = 'bannerLi'>
                        <img src = 'test.jpg' />
                    </li>
                </ul>
                <div class = 'btns' id = 'btns'>
                    <span style = 'background:#FE5400'></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div id = 'entrance'>
                <ul>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                </ul>
                <ul>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<footer>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
</footer>
<script>
    var gId = function(obj){
    return document.getElementById(obj);
}
var gTag = function(obj){
    return document.getElementsByTagName(obj);
}
var gClass = function(obj){
    return document.getElementsByClassName(obj);
}
var obj = {
    header : gTag('header')[0],
    footer : gTag('footer')[0],
    content : gId('content'),
    banner : gId('banner'),
    bannerLi : gClass('bannerLi'),
    oHeight : document.documentElement.clientHeight,
    btn : document.getElementById('btns').getElementsByTagName('span'),
    body : gTag('body')[0],
    view : gId('view'),
    entrance : gId('entrance')
}

//设置页面宽高位置等
var set = function(){
    var bHeight = obj.banner.offsetWidth;
    var len = obj.bannerLi.length;
    obj.banner.style.height = obj.banner.offsetWidth/3.17 + 'px';
    for(var i = 0;i<len;i++){
        obj.bannerLi[i].style.transform = 'translate3D('+bHeight * i+'px,0,0)';
    }
    obj.body.style.height = document.documentElement.clientHeight + 'px';
}
//焦点轮播图
var banner = function(){
    var idx = 0;
    var len = obj.bannerLi.length;
    var timer;
    obj.banner.addEventListener('touchstart',function(e){
        //记录点击时X点
        startPoint = e.touches[0].clientX;
        for(var i = 0;i<len;i++){
            obj.bannerLi[i].style.transition = '';
        }
    })
    obj.banner.addEventListener('touchmove',function(e){
        //记录移动时X点
        movePoint = e.touches[0].clientX - startPoint;
        var n = movePoint + obj.banner.offsetWidth;
        var p = movePoint - obj.banner.offsetWidth;
        obj.bannerLi[idx].style.transform = 'translate3D('+movePoint+'px,0,0)';
        obj.bannerLi[idx + 1] && (obj.bannerLi[idx + 1].style.transform = 'translate3D('+ n +'px,0,0)');
        obj.bannerLi[idx - 1] && (obj.bannerLi[idx - 1].style.transform = 'translate3D('+ p +'px,0,0)');
    })
    obj.banner.addEventListener('touchend',function(e){
        var boundary = obj.oHeight / 6;
        if (movePoint > boundary){
            if (idx < 1) {
                idx = 0
            } else {
                idx -= 1;
                console.log(idx);
            }
        }
        if (movePoint < -boundary){
            if (idx > 3) {
                idx = 4
            } else {
                idx += 1;
                console.log(idx);
            }
        }
        setBtn();
        obj.bannerLi[idx].style.transform = 'translate3D(0,0,0)';
        obj.bannerLi[idx + 1] && (obj.bannerLi[idx + 1].style.transform = 'translate3D(' + obj.oHeight + 'px,0,0)');
        obj.bannerLi[idx - 1] && (obj.bannerLi[idx - 1].style.transform = 'translate3D(-' + obj.oHeight + 'px,0,0)');

        obj.bannerLi[idx].style.transition = 'transform 0.3s';
        obj.bannerLi[idx + 1] && (obj.bannerLi[idx + 1].style.transition = 'transform 0.3s');
        obj.bannerLi[idx - 1] && (obj.bannerLi[idx - 1].style.transition = 'transform 0.3s');
    })
    var setBtn = function(){
        for (var i = 0;i<obj.btn.length;i++){
            obj.btn[i].style.background = '';
        }
        obj.btn[idx].style.background = '#FE5400';
    }
}
//页面滑动
var pageMove = function(){
    window.addEventListener('touchstart',function(e){
        startY = e.touches[0].clientY;

    })
    window.addEventListener('touchmove',function(e){
        clientY = e.touches[0].clientY - startY;
        e.preventDefault();
        obj.view.style.transform = 'translate3D(0,'+ clientY +'px,0)'
        console.log(clientY);
    })
    window.addEventListener('touchend',function(e){
        obj.view.style.transform = 'translate3D(0,'+ clientY +'px,0)'
    })
}
window.onload = function(){
    set();
    banner();
    pageMove();
    (function(){
        obj.entrance.style.height = obj.entrance.offsetWidth / 2.34 + 'px';
    })();
}
window.onresize = function(){
    set();
    (function(){
        obj.entrance.style.height = obj.entrance.offsetWidth / 2.34 + 'px';
    })();
}
</script>
</body>
</html>